<!-- 卡片>电气火灾 -->
<template>
<div class="electrical-fire">
  <div class="card-title" @click="jumpDeviceDetail">
    <span class="card-title-text">电气火灾</span>
  </div>
  <div class="electrical-fire-content">
    <div class="electrical-fire-content-head">
      <i class="electrical-fire-content-head-icon"></i>
      <span class="electrical-fire-content-head-tips">{{faultNum}}个消防设施上报故障</span>
    </div>
    <!-- 散点图 -->
    <div :id="'card_electricalFireEchart_'+getNewId" class="card_electricalFireEchart"></div>
  </div>
</div>
</template>

<script>
import {getFireResMonitorInfoNew} from "@/api/sysMonitor"

let Echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/scatter");

export default {
  props: {
    orgId: {
      default() {
        return false
      }
    }
  },
  data() {
    return {
      faultNum:0,
      myChart: {},
      name: '电气火灾散点图',
      details:[],
      orgIds:this.orgId || this.$store.state.userInfo.organizationIds,
      getNewId: (new Date()).getTime(),
      isMuilUnitUser:this.$store.state.userInfo.isMuilUnitUser//0:单单位用户;1:多单位用户
    }
  },
  methods: {
    getData(){
      let that = this
      getFireResMonitorInfoNew({
          orgIds: that.orgIds,
          resType: 3
      }).then(res =>{
        let data = res.data
        that.faultNum = data.faultNum
        that.details = data.details
        let [alarmArr,normalArr] =[[],[]]
        $.each(data.details,(index,obj)=>{
          let cA = 0//当前电流
          let cT = 0//当前温度
          let tips = obj.name+'：</br>'
          //取3种温度统计中的最大值
          $.each(obj.analogInfo,(indexAnalog,objAnalog)=>{
            if(objAnalog.realTimeAnalogInfo){
              if(objAnalog.dataTypeId ===39){
                tips+=''
                cA=objAnalog.realTimeAnalogInfo.analogValue
              }else{
                if(objAnalog.realTimeAnalogInfo.analogValue>cT){
                  cT= objAnalog.realTimeAnalogInfo.analogValue
                }
              }
            }
          })
          if(obj.fireTType == 0){
            normalArr.push([cA,cT,obj])
          }else{
            alarmArr.push([cA,cT,obj])
          }
        })
        // 基于准备好的dom，初始化echarts实例
        let $dom = document.getElementById('card_electricalFireEchart_'+that.getNewId);
        if($dom){
          this.myChart = Echarts.init($dom);
          this.myChart.setOption({
            /* backgroundColor: new Echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
                offset: 0,
                color: '#f7f8fa'
            }, {
                offset: 1,
                color: '#cdd0d5'
            }]), */
            grid: {
                /* left: '0', */
                right: '20%',
                top: '15%',
                bottom: '10%' 
            },
            title: {
              show:false
            },
            legend: {
                textStyle: { color: 'rgba(255,255,255,0.5)' },
                right: 10,
                itemHeight: 10,
                itemWidth: 10,
                data: ['正常', '报警']
            },
            xAxis: {
                name:'剩余电流mA',
                nameGap:0,
                nameTextStyle:{
                  color: 'rgba(255,255,255,0.5)',
                  fontSize: 12,
                },
                splitLine: {
                  show:false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: 'rgba(255,255,255,0.5)',
                        fontSize: 12
                    },
                },
                axisLine: {
                  lineStyle: {
                    color: 'rgba(255,255,255,0.5)'
                  },
                },
            },
            tooltip: {
                trigger: 'item',
                formatter: function(params){
                  let _html = ''
                  $.each(params.data[2].analogInfo,(index,obj)=>{
                    if(obj.realTimeAnalogInfo){
                      _html+=(obj.dataTypeName+'    '+obj.realTimeAnalogInfo.analogValue+obj.realTimeAnalogInfo.analogUnits+`</br>`)
                    }
                  })
                  return(params.data[2].name+`：</br>`+ _html)
                }
            },
            yAxis: {
              name:'温度℃',
              nameTextStyle:{
                color: 'rgba(255,255,255,0.5)',
                fontSize: 12
              },
              splitLine: {
                show:false
              },
              axisTick: {
                  show: false
              },
              axisLabel: {
                  show: true,
                  textStyle: {
                      color: 'rgba(255,255,255,0.5)',
                      fontSize: 12
                  },
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.5)'
                },
              },
            },
            series: [{
                name: '正常',
                data: normalArr,
                type: 'scatter',
                symbolSize:10,
                label: {
                    /* emphasis: {
                        show: true,
                        formatter: function (param) {
                            return param.data[3];
                        },
                        position: 'top'
                    } */
                },
                itemStyle: {
                  normal: {
                      shadowBlur: 10,
                      shadowColor: 'rgba(25, 100, 150, 0.5)',
                      shadowOffsetY: 5,
                      color: new Echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                          offset: 0,
                          color: 'rgb(129, 227, 238)'
                      }, {
                          offset: 1,
                          color: 'rgb(25, 183, 207)'
                      }])
                  }
                }
            }, {
                name: '报警',
                data: alarmArr,
                type: 'scatter',
                symbolSize: 10,
                label: {
                    /* emphasis: {
                        show: true,
                        formatter: function (param) {
                            return param.data[3];
                        },
                        position: 'top'
                    } */
                },
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(120, 36, 50, 0.5)',
                        shadowOffsetY: 5,
                        color: new Echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                            offset: 0,
                            color: 'rgb(251, 118, 123)'
                        }, {
                            offset: 1,
                            color: 'rgb(204, 46, 72)'
                        }])
                    }
                }
            }]
          });
          that._initChart()
        }
      });
    },
    _initChart(){
      this.$root.charts.push(this.myChart)
      window.addEventListener('resize', function() {
        this.myChart.resize()
      }.bind(this))
    },
    // 设备详情
    jumpDeviceDetail() {
      let that = this
      if(that.details.length>0){
        that.$Ctl.enterDetail('EquipmentList', {
            orgId: that.orgIds,
            systemId: 132
        })
      }else{
        that.$Ctl.message('当前单位没有电气火灾设备！', 'info')
      }
    }
  },
  created(){
    let that = this
    
    if(!that.isMuilUnitUser || (that.isMuilUnitUser && !that.orgId)){//推送只推一级首页
      window.FunList.electricalFire_ws = that.getData
    }
  },
  mounted() {
    this.getData()
  }
}

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.electrical-fire {
  height: 100%;
  width: 100%;
  .electrical-fire-content{
    height: calc(100% - 40px);
    .electrical-fire-content-head{
      text-align: right;
      line-height: 50px;
      .electrical-fire-content-head-icon{
        display: inline-block;
        height: 18px;
        width: 21px;
        background: url(../../assets/images/cards/icon-fault.png) no-repeat;      
      }
      .electrical-fire-content-head-tips{
        line-height:16px;
        font-size:16px;
        color:rgba(213,148,73,1);
      }
    }
  }
  .card_electricalFireEchart{
    height: calc(100% - 50px);
    width: 100%;
  }
}
</style>